﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="WdatePicker.js"></script>
    <!--<script type="text/javascript" src="calendar.js"></script>-->
    <script type="text/javascript">

    </script>
    <style type="text/css">
        body {
            font: 16px "Microsoft Yahei";
        }

        dd, dt {
            line-height: 30px;
        }

        fieldset {
            margin-top: 30px;
        }

        input {
            padding-left: 6px;
        }

        legend {
            color: blue;
        }

        pre {
            background: #f5f5f5;
            margin-bottom: 5px;
            border: 1px dotted #785;
            padding: 5px;
            font-family: Consolas, "Courier New", Courier, monospace;
            text-align: left;
        }

        small {
            color: #999;
            font-size: 100%;
        }
    </style>

</head>

<body>
    <fieldset>
        <legend>一般框的常规调用</legend>
        <dl>
            <dt>示例1</dt>
            <dd><input id="d11" type="text" onclick="WdatePicker()" /></dd>
        </dl>
        <pre>
< input id="d11" type="text" onclick="WdatePicker()" />
    </pre>
    </fieldset>
    <fieldset>
        <legend>一般框带图标</legend>
        <dl>
            <dt>示例2</dt>
            <dd><input class="Wdate" id="d12" type="text" onclick="WdatePicker()" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" /></dd>
        </dl>
        <pre>
< input class="Wdate" id="d12" type="text" onclick="WdatePicker()"  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
        <small>//dateFmt可以配置日期显示格式 默认为yyyy-MM-dd HH-mm-ss</small>
    </pre>
    </fieldset>

    <fieldset>
        <legend>显示默认时间</legend>
        <dl>
            <dt>示例3</dt>
            <dd> <input id="test01" class="Wdate" type="text" value="2015-12-11" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd '})" /></dd>
        </dl>
        <pre>
< input id="test01" class="Wdate" type="text" value="2015-12-11" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})" />
        <small>//可以直接将时间以yyyy-MM-dd的形式写入value</small>
        <small>//或者利用new Date()生成时间 后利用format转换成yyyy-MM-dd的形式</small>
        <small>//如需精确到时分秒 修改为 yyyy-MM-dd HH:mm:ss 即可</small>
        </pre>
    </fieldset>
    <fieldset>
        <legend>起始日期功能（固定日期比如1995-05-01）</legend>
        <dl>
            <dt>示例4 </dt>
            <dd>
                <input class="Wdate" type="text" id="d222" onfocus="WdatePicker({startDate:'1995-05-01',alwaysUseStartDate:true})" />
            </dd>
        </dl>
        <pre>
< input class="Wdate" type="text" id="d222" onfocus="WdatePicker({startDate:'1995-05-01',alwaysUseStartDate:true})" />
        <small>//设置此功能时需要将WdatePicker.js内的dateFmt与 传入时间格式一致</small>
        <small>//alwaysUseStartDate默认false 如果不为空则不显示起始时间，为true无论是否为空都显示传入的起始时间</small>
        </pre>
    </fieldset>
    <fieldset>
        <legend>起始日期功能（年月日使用当年当月的1日,时分秒使用00:00:00作为起始时间）</legend>
        <dl>
            <dt>示例5</dt>
            <dd><input class="Wdate" type="text" id="d233" onfocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})" /></dd>
        </dl>
        <pre>
< input class="Wdate" type="text" id="d233" onfocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})" />
        <small>//原理同上</small>
        </pre>
    </fieldset>

    <fieldset>
        <legend>双月日历功能</legend>
        <dl>
            <dt>示例6</dt>
            <dd><input class="Wdate" type="text" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})" /></dd>
        </dl>
        <pre>
< input class="Wdate" type="text" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})" />
        <small>//设置doubleCalendar即可</small>
        </pre>
    </fieldset>
    <fieldset>
        <legend>自定义和动态切换皮肤</legend>
        <dl>
            <dt>示例7</dt>
            <dd><input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen'})" /></dd>
        </dl>
        <pre>
< input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen'})" />
        <small>//设置doubleCalendar即可</small>
        </pre>
    </fieldset>
    <fieldset>
        <legend>onpicking事件演示</legend>
        <dl>
            <dt>示例8</dt>
            <dd><input type="text" id="5421" onfocus="WdatePicker({onpicking:function(dp){if(!confirm('日期框原来的值为: '+dp.cal.getDateStr()+', 要用新选择的值:' + dp.cal.getNewDateStr() + '覆盖吗?')) return true;}})" class="Wdate" /></dd>
        </dl>
        <pre>
< input type="text" id="5421" onfocus="WdatePicker({onpicking:test()})" class="Wdate" />
        <small>//dp.cal.getDateStr()获取旧日期  dp.cal.getNewDateStr()获取新日期</small>
        </pre>
    </fieldset>
    <fieldset>
        <legend>使用onpicked实现日期选择联动</legend>
        <dl>
            <dt>示例9</dt>
            <dd><input id="d5221" class="Wdate" type="text" onfocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})" /> 至 <input id="d5222" class="Wdate" type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})" /></dd>
        </dl>
        <pre>
< input id="d5221" class="Wdate" type="text" onfocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})" /> 至 <input id="d5222" class="Wdate" type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})" />
        <small>//</small>
        </pre>
    </fieldset>
    <fieldset>
        <legend>使用onclearing事件取消清空操作</legend>
        <dl>
            <dt>示例10</dt>
            <dd><input type="text" class="Wdate" id="d531" onfocus="WdatePicker({onclearing:function(){if(!confirm('日期框的值为:'+this.value+', 确实要清空吗?'))return true;}})" /></dd>
        </dl>
    </fieldset>
    <script>
        var showDateTest = function () {
            if (!confirm('日期框原来的值为: ' + dp.cal.getDateStr() + ', 要用新选择的值:' + dp.cal.getNewDateStr() + '覆盖吗?')) return true;
        }

        Date.prototype.format = function (format) {
            var args = {
                "M+": this.getMonth() + 1, "d+": this.getDate(), "h+": this.getHours(), "m+": this.getMinutes(), "s+": this.getSeconds(), "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
                "S": this.getMilliseconds()
            }; if (/(y+)/.test(format))
                format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var i in args) {
                var n = args[i];
                if (new RegExp("(" + i + ")").test(format))
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length));
            } return format;
        };
        $(function () {
            // $("#test01").val(new Date("2015/12/11").format("yyyy-MM-dd"));
        })
    </script>
</body>
</html>
